<template>
    <el-drawer custom-class="flex-drawer" title="选择点位" :model-value="modelValue" :size="1200" @closed="handleClose">
        <SelectPoint ref="formRef" class="select-point" :is-edit="true" :plan-id="planDetail.planId" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, defineProps, defineEmits, computed, reactive } from 'vue';
import SelectPoint from './selectPoint.vue';

const formRef = ref(null);
const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    planDetail: {
        type: Object,
        default: () => null,
    },
});

const handleClose = () => {
    emits('update:modelValue', false);
};

const submit = async () => {
    await formRef.value.handleSubmit();
    handleClose();
    ElMessage.success('提交成功！');
    emits('success');
};
</script>

<style lang="scss" scoped>
.btn-group {
    text-align: center;
    .el-button {
        display: inline-block;
        width: 270px;
        height: 55px;
        & + .el-button {
            margin: 15px 0 0;
        }
    }
}
// .select-point :deep(.common-table-tabs) {
//     padding-top: 0;
//     margin: -4px;
// }
:deep(.el-drawer__footer) {
    padding-top: 20px;
}
</style>
